<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <svg width="400" height="400" viewBox="0 0 100 100">
      <defs>
        <radialGradient id="gradient1" fr="15%" r="30%" spreadMethod="repeat">
            <stop offset="0%" stop-color="#ff0" stop-opacity="1" />
            <stop offset="100%" stop-color="#f00" stop-opacity="0.5" />
        </radialGradient>

        <radialGradient id="gradient2" fr="15%" r="30%" spreadMethod="reflect" href="#gradient1" /> 
      </defs>
      <circle cx="25" cy="25" r="25" fill="url(#gradient1)"/>
      <circle cx="75" cy="75" r="25" fill="url(#gradient2)"/>
    </svg>
    <hr>
    <svg width="400" height="400" viewBox="0 0 100 100">
        <defs>
            <radialGradient id="gradient3" fr="15%" r="30%" spreadMethod="repeat" gradientTransform="skewX(20) translate(-.2, 0)">
                <stop offset="0%" stop-color="#ff0" stop-opacity="1" />
                <stop offset="100%" stop-color="#f00" stop-opacity="0.5" />
            </radialGradient>
            <linearGradient id="gradient4" x1="40%"  x2="60%" spreadMethod="repeat" href="#gradient3" />
        </defs>
        <circle cx="30" cy="30" r="25" fill="url(#gradient4)"/>
        <rect x="20" y="60" width="60" height="30" fill="url(#gradient3)"/>
      </svg>
     
    <script src="index.js"></script>
  </body>
</html>
